<template>
  <div class="device-gatway-Searchs bg-fff">
    <!-- 搜索框 -->
    <div class="search">
      <li class="flex aic">
        <span class="text">在线状态</span>
        <el-select v-model="valueState" class="m-2" placeholder="全部">
          <el-option label="全部"  value="all" />
          <el-option label="在线" value="true" />
          <el-option label="离线" value="false" />
        </el-select>
      </li>
      <li class="flex mt-10 flex aic">
        <span class="text">EUI</span>
        <p><el-input v-model="input" placeholder="设备EUI" /></p>
      </li>
      <li class="flex mt-10 flex aic">
        <span class="text">绑定时间</span>
        <div class="demo-range">
          <el-date-picker
            v-model="valueTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间" 
            :unlink-panels="true"
          />
        </div>
      </li>
    </div>
    <!-- 搜索按鈕 -->
    <el-row class="flex aic mt-15 ml-20 pb-10 mb-10">
      <el-button @click="searchList(data)" :icon="Search" type="primary"
        >搜索</el-button
      >
      <el-button @click="del()" :icon="Delete" type="primary"
        >清除条件</el-button
      >
      <el-button @click="Ref()" :icon="RefreshLeft" type="primary"
        >刷新</el-button
      >
      <span class="ml-10 mr-5 f14 f999">搜索结果:</span>
      <span class="f14 f999">{{total}}</span>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Delete, RefreshLeft, Search } from "@element-plus/icons-vue";
const input = ref(""); //EUI
const valueState = ref(""); //选择状态
const valueTime = ref(""); //选择时间状态
const emit = defineEmits("searchList", "del", "Ref");
//搜索
const searchList = () => {
  const data = ref({
    input: input.value,
    valueState: valueState.value,
    valueTime: valueTime.value,
  });
  emit("searchList", data.value);
};
//清除条件
const del = () => {
  input.value = '';
  valueState.value = '';
  valueTime.value = '';
  emit("del");
};
//刷新
const Ref = () => {
  emit("Ref");
  input.value = '';
  valueState.value = '';
  valueTime.value = '';
};
defineProps({
  total:Number
});
</script>

<style lang="less">
.device-gatway-Searchs {
  .search {
    margin-top: -1px;
    padding-bottom: 10px;
    .text {
      width: 100px;
      text-align: center;
      margin-right: 10px;
    }
  }
  .el-input__wrapper {
    flex-grow: 0;
    width: 300px;
  }
}
</style>